<script setup>

import {onMounted, ref, watch} from "vue";
import {Theme} from "@/views/HomeView_N.vue";
import {loadingBar} from "../HomeView_N.vue"
import axios from "axios";
import {useMessage} from "naive-ui";

const loginUser = ref(getUser());
//顶部消息变量
const message = useMessage();

let color = (Theme.value == null ? '#000' : '#fff');
const show = ref(false);
const data = ref([]);
const dataX = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);
const dataY = ref([0, 0, 0, 0, 0, 0, 0]);

const riderData = ref({
  orderNum: 1,
  finishNum:'',
  riderLev: 1,//骑手等级
  avgRate: 0,
  avgTime:'',
  good:'',
  bad:'',
  overTime:'',
  orderList:[],
  date:[],
  orderNumDate:[]
});

const loadData = () => {
  axios({
    method: "get",
    url: BASE_URL+"/v1/rider/selectDate?userId="+loginUser.value.userId
  }).then(res => {
    if (res.data.code === 2000) {
      riderData.value = res.data.data;
      dataX.value = riderData.value.date;
      dataY.value = riderData.value.orderNumDate

      options.value = {
        title: {
          text: '近一周接单量',
          style: {
            fill: (Theme.value == null ? '#000' : '#fff')
          }
        },
        xAxis: {
          name: '时间',
          data: dataX,
          boundaryGap: false,
          nameTextStyle: {
            fill: (Theme.value == null ? '#000' : '#fff'),
            fontSize: 15
          },
          axisLine: {
            style: {
              stroke: (Theme.value == null ? '#000' : '#fff'),
              lineWidth: 1
            },
          },
          axisTick: {
            style: {
              stroke: (Theme.value == null ? '#000' : '#fff'),
            }
          },
          axisLabel: {
            style: {
              fill: (Theme.value == null ? '#000' : '#fff'),
              fontSize: 15,
              rotate: 0
            }
          }
        },
        yAxis: {
          name: '接单量',
          data: 'value',
          nameTextStyle: {
            fill: (Theme.value == null ? '#000' : '#fff'),
            fontSize: 15
          },
          axisLine: {
            style: {
              stroke: (Theme.value == null ? '#000' : '#fff'),
              lineWidth: 1
            },
          },
          axisTick: {
            style: {
              stroke: (Theme.value == null ? '#000' : '#fff'),
            }
          },
          axisLabel: {
            style: {
              fill: (Theme.value == null ? '#000' : '#fff'),
              fontSize: 15,
              rotate: 0
            }
          }
        },
        series: [
          {
            data: dataY,
            type: 'line',
            smooth: true,
            lineArea: {
              show: true
            }
          }
        ]
      };
      options2.value = {
        radar: {
          indicator: [
            { name: '接单量', max: 300 },
            { name: '速度', max: 300 },
            { name: '服务', max: 300 },
            { name: '收入', max: 300 },
            { name: '评价', max: 300 },
            { name: '完成率', max: 300 }
          ],
          axisLabel: {
            style: {
              fill: (Theme.value == null ? '#000' : '#fff'),
              fontSize: 15
            }
          }
        },
        series: [
          {
            type: 'radar',
            data: dataRadar
          }
        ]
      };
      // 设置后置路由守卫
      loadingBar.finish();
      show.value = true;
    } else {
      message.error('加载数据失败咯~');
      loadingBar.error();
    }
  })
}

const options = ref({
  title: {
    text: '近一周接单量',
    style: {
      fill: (Theme.value == null ? '#000' : '#fff')
    }
  },
  xAxis: {
    name: '时间',
    data: dataX,
    boundaryGap: false,
    nameTextStyle: {
      fill: (Theme.value == null ? '#000' : '#fff'),
      fontSize: 15
    },
    axisLine: {
      style: {
        stroke: (Theme.value == null ? '#000' : '#fff'),
        lineWidth: 1
      },
    },
    axisTick: {
      style: {
        stroke: (Theme.value == null ? '#000' : '#fff'),
      }
    },
    axisLabel: {
      style: {
        fill: (Theme.value == null ? '#000' : '#fff'),
        fontSize: 15,
        rotate: 0
      }
    }
  },
  yAxis: {
    name: '接单量',
    data: 'value',
    nameTextStyle: {
      fill: (Theme.value == null ? '#000' : '#fff'),
      fontSize: 15
    },
    axisLine: {
      style: {
        stroke: (Theme.value == null ? '#000' : '#fff'),
        lineWidth: 1
      },
    },
    axisTick: {
      style: {
        stroke: (Theme.value == null ? '#000' : '#fff'),
      }
    },
    axisLabel: {
      style: {
        fill: (Theme.value == null ? '#000' : '#fff'),
        fontSize: 15,
        rotate: 0
      }
    }
  },
  series: [
    {
      data: dataY,
      type: 'line',
      smooth: true,
      lineArea: {
        show: true
      }
    }
  ]
});

const dataRadar = ref([111, 256, 178, 152, 266, 132]);
const options2 = ref({
  radar: {
    indicator: [
      { name: '接单量', max: 300 },
      { name: '速度', max: 300 },
      { name: '服务', max: 300 },
      { name: '收入', max: 300 },
      { name: '评价', max: 300 },
      { name: '完成率', max: 300 }
    ],
    axisLabel: {
      style: {
        fill: (Theme.value == null ? '#000' : '#fff'),
        fontSize: 15
      }
    }
  },
  series: [
    {
      type: 'radar',
      data: dataRadar
    }
  ]
});

watch(Theme,()=>{
  options.value = {
    title: {
      text: '近一周接单量',
      style: {
        fill: (Theme.value == null ? '#000' : '#fff')
      }
    },
    xAxis: {
      name: '时间',
      data: dataX,
      boundaryGap: false,
      nameTextStyle: {
        fill: (Theme.value == null ? '#000' : '#fff'),
        fontSize: 15
      },
      axisLine: {
        style: {
          stroke: (Theme.value == null ? '#000' : '#fff'),
          lineWidth: 1
        },
      },
      axisTick: {
        style: {
          stroke: (Theme.value == null ? '#000' : '#fff'),
        }
      },
      axisLabel: {
        style: {
          fill: (Theme.value == null ? '#000' : '#fff'),
          fontSize: 15,
          rotate: 0
        }
      }
    },
    yAxis: {
      name: '接单量',
      data: 'value',
      nameTextStyle: {
        fill: (Theme.value == null ? '#000' : '#fff'),
        fontSize: 15
      },
      axisLine: {
        style: {
          stroke: (Theme.value == null ? '#000' : '#fff'),
          lineWidth: 1
        },
      },
      axisTick: {
        style: {
          stroke: (Theme.value == null ? '#000' : '#fff'),
        }
      },
      axisLabel: {
        style: {
          fill: (Theme.value == null ? '#000' : '#fff'),
          fontSize: 15,
          rotate: 0
        }
      }
    },
    series: [
      {
        data: dataY,
        type: 'line',
        smooth: true,
        lineArea: {
          show: true
        }
      }
    ]
  };
  options2.value = {
    radar: {
      indicator: [
        { name: '接单量', max: 300 },
        { name: '速度', max: 300 },
        { name: '服务', max: 300 },
        { name: '收入', max: 300 },
        { name: '评价', max: 300 },
        { name: '完成率', max: 300 }
      ],
      axisLabel: {
        style: {
          fill: (Theme.value == null ? '#000' : '#fff'),
          fontSize: 15
        }
      }
    },
    series: [
      {
        type: 'radar',
        data: dataRadar
      }
    ]
  };
});
onMounted(()=>{
  loadData();
})
</script>

<template v-if="show">
  <div style="padding: 0 150px">
    <n-flex>
      <n-tabs animated>
        <n-tab-pane name="oasis" tab="数据概览">
          <n-flex vertical style="gap: 30px 0">
            <div>
              <div style="margin-bottom: 20px">
                <span style="font-size: 20px">核心数据概览</span>
              </div>
              <div style="display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 15px;margin-bottom: 20px">
                  <!-- 这部分未定，我也不确定需要哪些数据，这里面有不合理或者你觉得更好的就提出来-->
                <n-card class="dataCard" title="累计接单">
                  <span style="font-size: 20px">
                    <n-number-animation
                        show-separator
                        :from="0"
                        :to="riderData.orderNum"
                    />
                  </span>
                </n-card>
                <n-card class="dataCard" title="完成订单">
                  <span style="font-size: 20px">
                    <n-number-animation
                        show-separator
                        :from="0"
                        :to="riderData.finishNum"
                    />
                  </span>
                </n-card>
                <n-card class="dataCard" title="骑手评分">
                  <span style="font-size: 20px">
                    {{riderData.avgRate}}
                  </span>
                </n-card>
                <n-card class="dataCard" title="平均时长">
                  <span style="font-size: 20px">
                    {{riderData.avgTime}}
                  </span>
                </n-card>
                <n-card class="dataCard" title="好评数">
                  <span style="font-size: 20px">
                    <n-number-animation
                        show-separator
                        :from="0"
                        :to="riderData.good"
                    />
                  </span>
                </n-card>
                <n-card class="dataCard" title="差评数">
                  <span style="font-size: 20px">
                    <n-number-animation
                        show-separator
                        :from="0"
                        :to="riderData.bad"
                    />
                  </span>
                </n-card>
                <n-card class="dataCard" title="超时数">
                  <span style="font-size: 20px">
                    <n-number-animation
                        show-separator
                        :from="0"
                        :to="riderData.overTime"
                    />
                  </span>
                </n-card>
                <n-card class="dataCard" title="骑手等级">
                  <span style="font-size: 20px">
                    LV.{{riderData.riderLev}}
                  </span>
                </n-card>
              </div>
              <n-card style="width: 100%; height: 500px;" title="图表">
                <!-- 需要一个数组，就限定在七天，七天内的接单量-->
                <dv-charts v-model:option="options"/>
              </n-card>
            </div>
            <div style="height: 800px;">
              <div style="margin-bottom: 20px">
                  <!--  近期订单，数据可以多一些，十条左右-->
                <span style="font-size: 20px">近期接单</span>
              </div>
              <n-card style="height: 700px;overflow-y: hidden">
                <n-scrollbar style="max-height: 600px">
                  <n-list hoverable clickable>
                    <n-list-item v-for="order in riderData.orderList">
                      <n-thing :title="order.orderTitle" content-style="margin-top: 10px;">
                        <template #description>
                          <n-space size="small" style="margin-top: 4px">
                            <n-tag :bordered="false" type="success" size="small">
                              {{order.endLocation}}
                            </n-tag>
                            <n-tag :bordered="false" type="success" size="small">
                              {{order.orderType}}
                            </n-tag>
                            <n-rate :value="order.orderRate" readonly></n-rate>
                          </n-space>
                        </template>
                        {{order.orderDescription}}
                      </n-thing>
                    </n-list-item>
                  </n-list>
                </n-scrollbar>
              </n-card>
            </div>
          </n-flex>
        </n-tab-pane>
        <n-tab-pane name="the beatles" tab="骑手诊断">
          <div style="width: 100%;height: 500px;">
            <div style="margin-bottom: 20px">
              <span style="font-size: 20px">表现总结</span>
            </div>
            <n-card style="width: 100%;height: 400px;">
              <dv-charts :option="options2" />
            </n-card>
          </div>

          <div style="width: 100%;height: 500px;">
            <div style="margin-bottom: 20px">
              <span style="font-size: 20px">骑手建议</span>
            </div>
            <n-card style="width: 100%;height: 400px;">
              <div style="font-size: 20px" >
                1. 安全第一：始终遵守交通规则，佩戴好安全头盔，不闯红灯，不逆行。雨雪天气要减速慢行，确保自己和他人的安全。
                2. 合理规划路线：利用导航软件提前规划好送餐路线，尽量避开拥堵路段，提高送餐效率。同时，根据订单的送达时间要求，合理安排先后顺序。
                3. 保温措施：确保食物保温箱处于良好状态，适时检查保温效果，避免食物在运送过程中变凉，影响顾客体验。
                4. 沟通礼貌：与顾客沟通时保持礼貌友好，遇到问题及时电话联系，解释情况并寻求解决方案。比如，预计送达时间有延误时，提前通知顾客，获取理解。
                5. 关注细节：送餐前确认订单信息无误，特别是特殊要求（如少盐、去冰等），确保准确无误地送达顾客手中。
                6. 自我保健：工作强度大时，记得适当休息，保持良好的饮食习惯和作息规律，长时间骑行后做些拉伸运动，预防职业病。
                7. 学习提升：利用空闲时间了解平台的新政策、奖励机制，参加平台提供的培训课程，不断提升自己的服务技能和效率。
                8. 维护形象：保持个人卫生和着装整洁，作为服务行业的一员，良好的形象也是提升顾客满意度的一部分。
                9. 心理调适：面对工作中的压力和挑战，学会情绪管理，保持积极乐观的态度，必要时可寻求同行或专业人士的支持和交流。
                10.反馈与建议：积极向平台反馈工作中遇到的问题和建议，比如路线优化、客户不合理要求处理等，共同促进外卖行业的健康发展。
              </div>
            </n-card>
          </div>


        </n-tab-pane>
      </n-tabs>
    </n-flex>
  </div>
</template>

<style scoped>
.dataCard:hover {
  background-color: rgba(99, 226, 183, 0.2);;
}

</style>